<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<title>同行人分析</title>
	
	<%@ include file="../common.jsp"%>
	<script type="text/javascript" src="${path }/static/vender/bootstrap/bootstrap-paginator.min.js"></script>
	<script type="text/javascript" src="${path }/static/vender/My97DatePicker/WdatePicker.js"></script>
</head>

<body>
	<jsp:include page="${pagePath }/header.jsp">
		<jsp:param value="1" name="active" />
	</jsp:include>

	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<jsp:include page="left_navbar.jsp">
					<jsp:param value="5" name="active" />
				</jsp:include>
			</div>

			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2">
				<h3 class="page-header">同行人分析</h3>
				<div class="row">
					<div class="col-sm-12">
						<label class="form-inline">MAC: 
							<input type="text" class="form-control" name="deviceMac" id="deviceMac" style="width: 170px;" placeholder="如08-D4-0C-47-1A-4E">
						</label> 
						&emsp;&emsp;
		                <label class="form-inline">采集点: 
							<select class="form-control" name="deviceNo" id="deviceNo">
								<option value="">选择采集点</option>
							</select>
						</label>
						&emsp;&emsp; 
						<label class="form-inline">开始时间: 
							<input name="startTime" id="startTime" type="text" class="form-control" style="width: 160px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly />
						</label> 
						&emsp;&emsp; 
						<label class="form-inline">结束时间: 
							<input name="endTime" id="endTime" type="text" class="form-control" style="width: 160px;" onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" readonly />
						</label>
						&emsp;&emsp; 
						<button type="button" class="btn btn-info" onclick="initPage();getInfoList();">&nbsp;检索&nbsp;</button>
					</div>
				</div>

				<br />

				<div class="table-responsive">
					<table class="table table-striped">
						<thead>
							<tr>
								<th>设备MAC</th>
								<th>厂商</th>
								<th>采集点</th>
								<th>出现时间</th>
								<th>离开时间</th>
								<th>停留时间</th>
								<th>同行人查询</th>
							</tr>
						</thead>
						<tbody id="listInfo">

						</tbody>
					</table>
				</div>
				<div style="background-color: #f5f5f5;" class="text-center">
					<ul id="pageChoose"></ul>
				</div>
				<!-- 分页条 -->

				<!-- Modal -->
				<div class="modal fade custom-width" id="modal-partner">
					<div class="modal-dialog" style="width: 60%;">
						<div class="modal-content">
							<div class="modal-header">
								<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
								<h4 class="modal-title">同行人信息列表</h4>
							</div>
							<div class="modal-body">
								<div class="row">
									<div class="col-md-12">
										<div class="table-responsive">
											<table class="table table-striped">
												<thead>
													<tr>
														<th>设备MAC</th>
														<th>厂商</th>
														<th>采集点</th>
														<th>出现时间</th>
														<th>离开时间</th>
														<th>停留时间</th>
													</tr>
												</thead>
												<tbody id="partnerListInfo">
						
												</tbody>
											</table>
										</div>
										<div style="background-color: #f5f5f5;" class="text-center">
											<ul id="pageChoosePartner"></ul>
										</div>
									</div>
								</div>
							</div>
							<div class="modal-footer">
								<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
	</div>
	<input id="curPage" type="hidden" />
	<input id="totalPage" type="hidden" />
	<input id="curPagePartner" type="hidden" />
	<input id="totalPagePartner" type="hidden" />
	<input id="inTimePartner" type="hidden" />
	<input id="goTimePartner" type="hidden" />


	<jsp:include page="${pagePath }/footer.jsp"></jsp:include>

	<script type="text/javascript">
		$(document).ready(function() {
			var defaultDate = new Date(new Date());
			var startTimeDefault = new Date;
			startTimeDefault.setHours(startTimeDefault.getHours () - 1);
			$("#endTime").val(defaultDate.format("yyyy-MM-dd hh:mm:ss"));
			$("#startTime").val(startTimeDefault.format("yyyy-MM-dd hh:mm:ss"));
			initDevices();
			getInfoList();
		});
		
		function initPage(){
			$('#curPage').val("");
		}
	
		function getInfoList(){
			var PAGE_SIZE = 10;
			var curPage = $('#curPage').val();
			var totalPage = $('#totalPage').val();
			var deviceMac = $("#deviceMac").val();
			var deviceNo = $("#deviceNo").val();
			var startTime = $("#startTime").val();
			var endTime = $("#endTime").val();
			if(curPage == ""){
				curPage = 1;
			}
			
		    $.ajax({
		        type: "post",
		        url: "${path }/data/partnerList",
		        data: {
		        	"curPage" : curPage,
					"totalPage" : totalPage,
					"deviceMac" : deviceMac,
					"deviceNo" : deviceNo,
					"startTime" : startTime,
					"endTime" : endTime
		        },
		        success: function(data) {
		        	$('#curPage').val(data.currentPage); //当前页
					$('#totalPage').val(data.totalPage); //总页数
					$("#listInfo").empty();
					$("#pageChoose").empty();
					if (data.totalCount > 0) {
						$.each( data.listInfo, function(i, item) {
							var index = PAGE_SIZE * (curPage - 1) + 1 + parseInt(i);
							var standingTime = getTime(item.goTime,item.inTime);
							var opera = "<button type='button' class='btn btn-info btn-sm' onclick='showPartnerList(&quot;"+dateForm(item.inTime)+"&quot;,&quot;"+dateForm(item.goTime)+"&quot;)'>&nbsp;查看&nbsp;</button>";
							$("#listInfo").append(
								"<tr><td>"
								+ checkUndefined(item.mac)
								+ "</td><td>"
								+ checkUndefined(item.phoneCompany)
								+ "</td><td>"
								+ checkUndefined(item.deviceName)
								+ "</td><td>"
								+ checkUndefined(dateForm(item.inTime))
								+ "</td><td>"
								+ checkUndefined(dateForm(item.goTime))
								+ "</td><td>"
								+ standingTime
								+ "</td><td>"
								+ opera
								+ "</td></tr>"
							);
						});
						setupPageChoose(data.currentPage, data.totalPage,"pageChoose","curPage",getInfoList);
					} else {
						$("#listInfo").append(
							"<tr><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td></tr>");
					}
				},
				error : function(error) {
					alert("错误代码：" + error.status + "。" + "错误内容:"+ error.statusText + "。");
				}
			});
		}
		
		//查询同行人列表
		function getPartnerList(){
			var curPage = $('#curPagePartner').val();
			var totalPage = $('#totalPagePartner').val();
			var deviceNo = $("#deviceNo").val();
			var inTime = $("#inTimePartner").val();
			var goTime = $("#goTimePartner").val();
			if(curPage == ""){
				curPage = 1;
			}
			
		    $.ajax({
		        type: "post",
		        url: "${path }/data/partnerList",
		        data: {
		        	"curPage" : curPage,
					"totalPage" : totalPage,
					"deviceMac" : "",
					"deviceNo" : deviceNo,
					"startTime" : inTime,
					"endTime" : goTime
		        },
		        success: function(data) {
		        	$('#curPagePartner').val(data.currentPage); //当前页
					$('#totalPagePartner').val(data.totalPage); //总页数
					$("#partnerListInfo").empty();
					$("#pageChoosePartner").empty();
					if (data.totalCount > 0) {
						$.each( data.listInfo, function(i, item) {
							var standingTime = getTime(item.goTime,item.inTime);
							$("#partnerListInfo").append(
								"<tr><td>"
								+ checkUndefined(item.mac)
								+ "</td><td>"
								+ checkUndefined(item.phoneCompany)
								+ "</td><td>"
								+ checkUndefined(item.deviceName)
								+ "</td><td>"
								+ checkUndefined(dateForm(item.inTime))
								+ "</td><td>"
								+ checkUndefined(dateForm(item.goTime))
								+ "</td><td>"
								+ standingTime
								+ "</td></tr>"
							);
						});
						setupPageChoose(data.currentPage, data.totalPage,"pageChoosePartner","curPagePartner",getPartnerList);
					} else {
						$("#partnerListInfo").append(
							"<tr><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td><td>暂无数据</td></tr>");
					}
				},
				error : function(error) {
					alert("错误代码：" + error.status + "。" + "错误内容:"+ error.statusText + "。");
				}
			});
		}
		
		//显示同行人列表
		function showPartnerList(inTime,goTime){
			$('#curPagePartner').val("");
			$('#modal-partner').modal('show', {backdrop: 'static'});
			$("#inTimePartner").val(inTime);
			$("#goTimePartner").val(goTime);
			getPartnerList();
		}
		
		//初始化下拉菜单
		function initDevices(){
			
		    $.ajax({
		        type: "post",
		        url: "${path }/dev/getAllDevices",
		        success: function(data) {
					$("#deviceNo").empty();
					$("#deviceNo").append("<option value= '' > 所有  </option>");
					if (data.devices.length > 0) {
						//解析数组
	                    $.each(data.devices,function(i, item) {
	                        $("#deviceNo").append("<option value=" + item.devNo + "  >" + item.devName + "</option>");
	                    });
					} else {
						$("#deviceNo").append("<option value= '' >加载失败</option>");
					}
				},
				error : function(error) {
					alert("错误代码：" + error.status + "。" + "错误内容:"+ error.statusText + "。");
				}
			});
		}
		
	</script>
</body>
</html>